<template>
  <section class="dialog-pops">
    <div class="dialog-marks" ref="mark" v-show="flag" @click="close"></div>
    <transition name="drop">
      <div v-show="flag" class="dialog-bodys" :style='{width: width + "px", marginLeft: -width/2 + "px"}'>
        <!-- 标题部分 -->
        <!--<header class="dialog-titles">
          {{ title }}
        </header>-->
        <span class="dialog-closed" @click='close' v-if="isShowCloseBtn">╳</span>
        <section ref="operation" class="dialog-operations">
          <slot name="operation"/>
        </section>
        <!-- 内容部分 -->
        <section ref="content" class="dialog-contents">
          <slot name="line"></slot>
          <slot name="content"/>
        </section>
        <!-- 选项部分 -->
        <footer class="dialog-footers">
          <slot name="options"/>
        </footer>
      </div>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'com-dialog',
  props: {
    flag: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'title'
    },
    width: {
      type: Number,
      default: 450
    },
    name: {
      default: null
    },
    dialogClose: {
      type: Function,
      default: () => {}
    },
    isShowCloseBtn: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'flag' (value) {
      value && this.shieldScroll(this.$refs.mark, this.$refs.content)
    }
  },
  methods: {
    close () {
      this.dialogClose(this.name)
    },
    shieldScroll (container, selectorScrollable) {
      window.addEventListener('mousewheel', function (e) {
        e = e || window.event
        if (e.target === container) {
          if (e.preventDefault) {
            e.preventDefault()
            e.returnValue = false
          }
        }
        return false
      })
    }
  }
}
</script>
